<template>
  <div class="ent-add-page container">
    <my-card title="新建账号">
      <template slot>
        <div class="enterprise-add-page">
          <el-form ref="form" :model="form" :rules="relus" label-width="140px">
            <el-form-item>
              <div class="item-title-box">基本信息</div>
            </el-form-item>
            <el-form-item label="用户名:" prop="account">
              <el-input v-model="form.account"></el-input>
            </el-form-item>
            <el-form-item label="用户角色:" prop="role">
              <el-select v-model="form.role" placeholder="">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <div class="item-title-box">详细信息</div>
            </el-form-item>
            <el-form-item label="平台管理员姓名:" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="属于部门:" prop="section">
              <el-select v-model="form.section" placeholder="">
                <el-option
                  v-for="item in sections"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="当前职位:" prop="duty">
              <el-input v-model="form.duty"></el-input>
            </el-form-item>
            <el-form-item label="联系地址:" prop="address">
              <el-input v-model="form.address"></el-input>
            </el-form-item>
            <el-form-item label="手机号码:" prop="phone">
              <el-input v-model="form.phone"></el-input>
            </el-form-item>
            <el-form-item label="邮箱地址:" prop="email">
              <el-input v-model="form.email"></el-input>
            </el-form-item>
            <el-form-item>
              <div class="item-title-box">安全信息</div>
            </el-form-item>
            <el-form-item label="新密码:" prop="password">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item label="确认密码:" prop="donePwd">
              <el-input v-model="form.donePwd"></el-input>
            </el-form-item>
            <el-form-item>
              <div class="bottom-btn-box">
                <el-button type="primary" @click="hkSubmit">确定</el-button>
                <el-button type="primary" plain @click="hkClickBack">
                  取消
                </el-button>
              </div>
            </el-form-item>
          </el-form>
        </div>
      </template>
    </my-card>
  </div>
</template>

<script>
import MyCard from "@/components/my-card/index";
import { hkPost } from "@/api/http";
import { httpApi } from "@/api/api";
import {
  hkHidLoading,
  hkShowErrorText,
  hkShowLoading,
  hkShowSuccessText,
  accoutnRoles,
  accoutnDutys
} from "@/utils/tools";

import { AES_CBC_encrypt } from "@/utils/aes";

export default {
  components: { MyCard },
  props: {},
  data() {
    return {
      form: {
        phone: "15551184232", //电话
        password: "12312", //密码
        account: "test2", // 账号
        section: 6, // 部门
        duty: "123", // 职位
        email: "13123@qq.com", //邮箱
        role: 1, // 账号类型
        name: "asda", // 名称
        address: "131231313", // 地址
        donePwd: "" // 确认密码
      },
      options: accoutnRoles,
      sections: accoutnDutys,
      relus: {
        phone: [
          {
            required: true,
            message: "请输入手机号",
            trigger: ["blur", "change"]
          }
        ], //电话
        password: [
          {
            required: true,
            message: "请输入账号密码",
            trigger: ["blur", "change"]
          }
        ], //密码
        account: [
          {
            required: true,
            message: "请输入用户名",
            trigger: ["blur", "change"]
          }
        ], // 账号
        name: [
          {
            required: true,
            message: "请输入用户姓名",
            trigger: ["blur", "change"]
          }
        ], // 名称
        donePwd: [
          {
            required: true,
            message: "请确认密码",
            trigger: ["blur", "change"]
          },
          {
            trigger: ["blur"],
            validator: (rule, value, callback) => {
              if (value === "") {
                callback(new Error("请确认密码"));
              } else if (value != this.form.password) {
                callback(new Error("两次输入密码不一致"));
              } else {
                callback();
              }
            }
          }
        ]
      }
    };
  },
  watch: {},
  computed: {},
  methods: {
    hkClickBack() {
      this.$router.back();
    },
    hkSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
          let parmas = Object.assign({}, this.form);
          delete parmas.donePwd;
          parmas.password = AES_CBC_encrypt(this.form.password);
          hkShowLoading("新建中...");
          hkPost(httpApi.userCreate, parmas)
            .then(res => {
              hkHidLoading();
              hkShowSuccessText("创建成功!");
              setTimeout(() => {
                this.$router.back();
              }, 1500);
            })
            .catch(err => {
              hkHidLoading();
            });
        } else {
          return false;
        }
      });
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.enterprise-add-page {
  width: 700px;
  margin: 0 auto;
  .item-title-box {
    text-align: center;
  }
  .bottom-btn-box {
    text-align: center;
  }
}
</style>
